<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/wolive.ico"/>
    <title>在线客服</title>
    {load href="__libs__/jquery/jquery.min.js"/}
    <link rel="stylesheet" type="text/css" href="__style__/index/chat.css?g=1&v=32383637303234363930">
    {load href="__libs__/jquery/jquery.cookie.js"/}
    {load href="__libs__/jquery/jquery.form.min.js"/}
    {load href="__libs__/layui/css/layui.css"/}
    {load href="__libs__/layui/layui.js"/}
    {load href="__libs__/layer/skin/layer.css"/}
    {load href="__libs__/layer/layer.js"/}
    {load href="__libs__/push/pusher.min.js"/}
    <script src="__libs__/adapter.js"></script>
    <script src="__script__/main.js?v=3.16"></script>

    <script type="text/javascript" src="/assets/libs/webrtc/recorder.js"></script>
    <link rel="stylesheet" href="/assets/libs/myeditor/css/editormd.css"/>

    <style type="text/css">

        .layui-layer-content {
            overflow: hidden;
        }

        #close_icon {
            position: absolute;
            right: 10px;
            top: 8px;
            cursor: pointer;
        }

        .size {
            min-width: 30px;
            height: 25px;
            line-height: 30px;
            border: none;

        }

        .my-circle {
            border-radius: 10px;
            width: 40px;
            heigh: 40px;
        }

        .input-but {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;
        }

        .fileinput {
            width: 20px;
            height: 30px;
            position: absolute;
            top: 0px;
            right: 0px;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
        }

        .icon_gray {
            -webkit-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }

        .chatmsg_no {
        }

        .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after {
            border: none;
            border-radius: 0;
            border-bottom: 3px solid #d41010;
        }

        .layui-tab-brief > .layui-tab-title .layui-this {
            color: #d41010;
        }

        .triangle {
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 8px solid #fff;
        }

        .hidden {
            visibility: hidden;
        }

        .hide {
            display: none;
        }

        #question_list div:hover {
            color: red;
        }

        .videos {
            font-size: 0;
            height: 100%;
            pointer-events: none;
            position: absolute;
            transition: all 1s;
            width: 100%;
        }

        #localVideo {
            height: 100%;
            max-height: 100%;
            max-width: 100%;
            /*object-fit: cover;*/
            transition: opacity 1s;
            width: 100%;
        }

        #remoteVideo {
            display: block;
            height: 100%;
            max-height: 100%;
            max-width: 100%;
            /*object-fit: cover;*/
            position: absolute;
            transition: opacity 1s;
            width: 100%;
        }
        .emoji {
            width: 24px;
            height: 24px;
        }

    </style>
</head>
<body>

<script>
    var mediaStreamTrack;
    var visiter = '{$visiter}';
    var business_id = '{$business_id}';
    var record = '{$from_url}';
    record.replace("%23", "#");
    record.replace("%26", "&");
    var pic = '{$avatar}';
    var channel = '{$channel}';
    var visiter_id = '{$visiter_id}';
    var url = '{$url}';
    var cid = '{$groupid}';
    var pic = '{$avatar}';
    if (pic == "") {
        pic = "/assets/images/index/avatar-red2.png";
    }

    var service_id = 0;
    // 专属客服名
    var exclusive_service_name = '{$exclusive_service_name}';
    var num;
    var t;

    var myTitle = document.title;

    var isActive;

    window.onfocus = function () {
        isActive = true;
        clearTimeout(t);
        document.title = myTitle;
    };

    window.onblur = function () {
        num = 0;
        isActive = false;
    };

    function title() {
        num++;

        if (num == 3) {
            num = 1;
        }

        if (num == 1) {
            document.title = '【】' + myTitle;
        }

        if (num == 2) {
            document.title = '【你有一条消息】' + myTitle;
        }

        t = setTimeout("title()", 500);

    }

    var wolive_connect = function () {

        pusher = new Pusher('{$app_key}', {
            encrypted: {$value}
            ,enabledTransports: ['ws']
            ,wsHost: '{$whost}'
            ,{$port}: {$wport}
            ,authEndpoint: '/admin/login/auth'
            ,disableStats: true
        });

        var channels = pusher.subscribe("cu" + channel);

        channels.bind('pusher:subscription_succeeded', function () {
            $.cookie("cid", "");
            if (typeof pusher.first_connect != "undefined") {
                var clear = function() {
                    $.each($(".conversation .chatmsg"), function (index, item) {
                        !$(item).find('.question').length && $(item).remove();
                    });
                }
                getdata(clear);
            }
            pusher.first_connect = false;
        });

        // 接收消息
        channels.bind('my-event', function (data) {

            if (data.message.service_id != service_id) {
                return;
            }

            if (!isActive) {
                title();
            }

            if ($.cookie('state') != 'off') {
                audioElementHovertree = document.createElement('audio');
                audioElementHovertree.setAttribute('src', "/upload/voice/default.mp3");
                audioElementHovertree.setAttribute('autoplay', 'autoplay');
            }

            var msg = '';
            msg += '<li class="chatmsg"><div style="position: absolute;left:3px;">';
            msg += '<img class="my-circle  se_pic" src="' + data.message.avatar + '" width="40px" height="40px"></div>';
            var picture_class = is_picture(data.message.content) ? ' no_border' : '';
            msg += "<div class='outer-left"+picture_class+"'><div class='service'>";
            msg += "<pre>" + data.message.content + "</pre>";
            msg += "</div></div>";
            msg += "</li>";
            $(".chatmsg_notice").remove();
            $(".chatmsg_no").remove();
            $(".conversation").append(msg);
            scroll_bottom();
        });


        channels.bind('first_word', function (data) {
            var msg = '';
            msg += '<li class="chatmsg_no chatmsg"><div style="position: absolute;left:3px;">';
            msg += '<img class="my-circle  se_pic" src="' + data.message.avatar + '" width="40px" height="40px"></div>';
            msg += "<div class='outer-left'><div class='service'>";
            msg += "<pre>" + data.message.content + "</pre>";
            msg += "</div></div>";
            msg += "</li>";

            $(".conversation").append(msg);

        });
        // 接受视频请求
        channels.bind("video", function (data) {
            var msg = data.message;
            var cha = data.channel;
            var avatar = data.avatar;
            var username = data.username;

            layer.open({
                type: 1,
                title: '申请框',
                area: ['260px', '160px'],
                shade: 0.01,
                fixed: true,
                btn: ['接受', '拒绝'],
                content: "<div style='position: absolute;left:20px;top:15px;'><img src='" + avatar + "' width='40px' height='40px' style='border-radius:40px;position:absolute;left:5px;top:5px;'><span style='width:100px;position:absolute;left:70px;top:5px;font-size:13px;overflow-x: hidden;'>" + username + "</span><div style='width:90px;height:20px;position:absolute;left:70px;top:26px;'>" + msg + "</div></div>",
                yes: function () {
                    layer.closeAll('page');

                    var str = '';
                    str += '<div class="videos">';
                    str += '<video id="localVideo" autoplay></video>';
                    str += '<video id="remoteVideo" autoplay class="hidden"></video></div>';


                    layer.open({
                        type: 1
                        , title: '视频'
                        , shade: 0
                        , closeBtn: 1
                        , area: ['440px', '378px']
                        , content: str
                        , end: function () {


                            mediaStreamTrack.getTracks().forEach(function (track) {
                                track.stop();
                            });

                        }
                    });

                    try {
                        connenctVide(cha);
                    } catch (e) {
                        console.log(e);
                    }

                },
                btn2: function () {
                    var sid = $.cookie('services');
                    $.ajax({
                        url: '/admin/event/refuse',
                        type: 'post',
                        data: {id: sid}
                    });

                    layer.closeAll('page');
                }
            });
        });

        // 接受拒绝视频请求
        channels.bind("video-refuse", function (data) {
            layer.alert(data.message);

            layer.closeAll('page');
        });

        // 认领通知
        channels.bind('cu_notice', function (data) {

            $("#img_head").attr("src", data.message.avatar);
            $("#services").text(data.message.nick_name);
            $(".chatmsg_notice").remove();
            $(".chatmsg").remove();
            $.cookie("services", data.message.service_id);
            service_id = data.message.service_id;

            getdata();
            getlisten(data.message.service_id);
        });


        channels.bind('getswitch', function (data) {

            $("#img_head").attr("src", data.message.avatar);
            $("#services").text(data.message.nick_name);
            $("#services").attr("data", data.message.service_id);
            service_id = data.message.service_id;
            exclusive_service_name = '';
            $(".chatmsg_notice").remove();
            $(".chatmsg_no").remove();
            $(".chatmsg").remove();

            var msg = '';
            msg += '<li class="chatmsg"><div style="position: absolute;left:3px;">';
            msg += '<img class="my-circle  se_pic" src="' + data.message.avatar + '" width="40px" height="40px"></div>';
            msg += "<div class='outer-left'><div class='service'>";
            msg += "<pre> 已经将您转接到其他客服  " + data.message.nick_name + "</pre>";
            msg += "</div></div>";
            msg += "</li>";
            $(".conversation").append(msg);

        });

        if ($.cookie("services")) {
            getlisten($.cookie('services'));
        }


        function getlisten(chas) {

            var channels = pusher.subscribe("se" + chas);

            //通知游客 客服离线
            channels.bind('logout', function (data) {
                $("#img_head").addClass("icon_gray");

            });

            //表示客服在线
            channels.bind("geton", function (data) {
                $("#img_head").removeClass("icon_gray");

            });
        }

        pusher.connection.bind('state_change', function (states) {
            if (states.current == 'unavailable' || states.current == "disconnected" || states.current == "failed") {
                $.cookie("cid", "");
                var id = $.cookie("services");
                if (id) {
                    pusher.unsubscribe("se" + id);
                }
                pusher.unsubscribe("cu" + channel);

                if (typeof pusher.isdisconnect == 'undefined') {
                    pusher.isdisconnect = true;
                    pusher.disconnect();
                    delete pusher;
                    window.setTimeout(function () {
                        wolive_connect();
                    }, 1000);
                }
            }
        });

        pusher.connection.bind('connected', function () {

        });
    }

    function info() {
        layer.tips("将您剪切好的图片粘贴到输入框即可，仅支持谷歌浏览器", "#paste", {tips: [1, '#9EC6EA'], area: '230px'});
    }

    // 给对话框里没有添加getbig事件的图片添加getbig事件
    $(function(){
        $('.content').on("click", "pre img[onclick!='getbig(this)']", function (e) {
            getbig(this);
            return false;
        });
    });

    function scroll_bottom(delay) {
        setTimeout(function () {
            var div = document.getElementById("wrap");
            div.scrollTop = div.scrollHeight;
        }, delay || 300);
    }

</script>

<div style="width: 80%;height: 90%;min-height:500px;min-width:900px;margin: 2% auto;position: relative;">
    <!--  对话框头部 -->
    <div class="header grey12">
        <div class="infomation">
            <img id="img_head" class="my-circle" src="/assets/images/index/workerman_logo.png" width="40px"
                 height="40px;">
            <span id="services" style="color: #ffffff;margin-left: 5px;"></span>
            <span id='service_icon' class="layui-badge-dot layui-bg-green hidden w_index_bg"
                  style="display:inline-block;width: 8px;height: 8px;border-radius: 8px;margin-left: 5px;"></span>
        </div>
    </div>

    <div id="container" style="width: 65%;height: 90%;position: absolute;top:60px; ">
        <div class="workarea">
            <!--  对话内容部分 -->
            <div class="content" id="wrap">
                <ul class="conversation">
                </ul>
            </div>
            <div class="footer widths">
                <div class="msg-toolbar">
                    <a id="face_icon" href="javascript:" onclick="faceon()"><i class="layui-icon"
                                                                               style="font-size: 26px;">&#xe60c;</i></a>


                    <a id="video" style="cursor: pointer;" onclick="getvideo()"><i class="layui-icon"
                                                                                   style="font-size: 26px;">&#xe6ed;</i></a>


                    {if $atype == 'open'}
                    <a onclick="getaudio()"><i class="layui-icon" style="font-size: 22px;cursor: pointer;">&#xe688;</i></a>
                    {/if}


                    <a id="images" href="javascript:">
                        <form id="picture" enctype="multipart/form-data">
                            <div class="layui-box input-but  size">
                                <i class="layui-icon" style="font-size: 30px;">&#xe60d;</i>
                                <input type="file" name="upload" class="fileinput" accept="image/*" onchange="put()"/>
                            </div>
                        </form>
                    </a>

                    <a id="files" href="javascript:">
                        <form id="file" enctype="multipart/form-data">
                            <div class="layui-box input-but  size">
                                <i class="layui-icon" style="font-size: 25px;">&#xe61d;</i>
                                <input type="file" name="folder" class="fileinput" onchange="putfile()"/>
                            </div>
                        </form>
                    </a>


                    <a onclick="hint()"><i class="layui-icon"
                                           style="font-size: 22px;cursor: pointer;position:absolute; right:130px;">
                        &#xe645;</i></a>
                    <a onmouseover="info()" id="paste" style="position:absolute; right:2px;top:5px;"><i
                            style="display:inline-block;width:15px;height:15px;background: url('/assets/images/index/cut.png');background-size: 100%;"></i>
                        怎样分发截图？</a>
                </div>

                <script type="text/javascript">

                    document.getElementById("wrap").onscroll = function () {
                        var t = document.getElementById("wrap").scrollTop;
                        if (t == 0) {
                            if ($.cookie("cid") != "") {
                                if ($.cookie('service')) {
                                    getdata();
                                }

                            }
                        }
                    }


                    var hint = function () {
                        if ($.cookie('state') != "off") {
                            layer.msg('关闭提示音', {
                                end: function () {
                                    $.cookie('state', "off");
                                }
                            });
                        } else {
                            layer.msg('开启提示音', {
                                end: function () {
                                    $.cookie('state', "on");
                                }
                            });
                        }
                    }

                </script>

                <div class="tool_box">

                    <div class="wl_faces_content">

                        <div class="wl_faces_main">

                        </div>
                    </div>

                </div>
                <div class="msg-input">
                    <div class="input-box" style="margin-top: 8px;">
                    <textarea id="text_in" class="edit-ipt"
                              style="font-weight: normal; font-size: 16px; overflow-x: hidden;overflow-y:auto;word-break: break-all; font-style: normal; outline: none;width: 100%;height: 76px;border:none;"
                              contenteditable="true" hidefocus="true" tabindex="0">face[微笑]</textarea>
                    </div>
                </div>

                <!--<a style="position: absolute;left:20px;bottom:0px;height: 42px;line-height: 42px;color:#aaa" href="https://www.wolive.cc" target="_blank">
                    本服务由wolive客服系统提供
                </a>-->

                <div class="msg-toolbar-footer grey12">
                    <a onclick="send()" class="layui-btn"
                       style="background:#d41010;position: absolute;left:0;top:0;width: 80%;height: 42px;text-align: center;line-height: 42px;">
                        发送
                    </a>
                    <a id="showinfo"
                       style="position: absolute;right: 0;top: 0;width: 20%;height: 42px;background: #d41010;text-align: center; border-left: 1px solid #FFF;cursor: pointer;">
                        <i class='triangle' style="margin-top: 21px;"></i>
                    </a>
                </div>

            </div>
        </div>
    </div>

    <!-- 浮层 -->
    <div id='fuceng' class="hide"
         style="background: #e2e2e2;width:270px;height: 80px;position: absolute;bottom: 10px;right: 11%;z-index: 9999;border-radius: 8px;">
        <ul style="display: inline-block;width: 100%;height: 30px;line-height: 40px;text-align: center;">
            <li onclick="choose(this)" style="cursor: pointer;" name='1'><i id='type1' class="layui-icon">
                &#xe605;</i><span>按Enter键发送消息，Ctrl+Enter换行</span></li>
            <li onclick="choose(this)" style="cursor: pointer;" name='2'><i id='type2' class="layui-icon hidden">
                &#xe605;</i><span>按Ctrl+Enter键发送消息，Enter换行</span></li>
        </ul>
    </div>

    <div id='xxxx'
         style="width: 34.9%;height: 90%;position: absolute;top:60px;left: 65%;background: #fff;border: 1px solid #ddd;overflow-x: hidden;">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 0px;">
            <ul class="layui-tab-title" id="tablist">
                <li class="layui-this">常见问题</li>

            </ul>
            <div class="layui-tab-content" id="tabcontent" cb-data="cb_31353736383235313738">

                <div class="layui-tab-item layui-show" id="question_list" style="width: 100%;overflow-y: auto;">

                </div>
                <!--  <div class="layui-tab-item" id="connect_list" style="width: 100%;overflow-y: auto;">

                 </div> -->

            </div>
        </div>
    </div>

</div>

<script src="__script__/index/inchat.js?v=5.1.3"></script>

<script type="text/javascript" src="/assets/js/video.js?v=2.1"></script>

<script type="text/javascript">

    var getaudio = function () {

        var sid = $.cookie('services');
        if (sid == service_id) {

            //音频先加载
            var audio_context;
            var recorder;
            var wavBlob;
            //创建音频
            try {
                // webkit shim
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia;
                window.URL = window.URL || window.webkitURL;

                audio_context = new AudioContext;

                if (!navigator.getUserMedia) {
                    console.log('语音创建失败');
                };
            } catch (e) {
                show_user_media_error(e);
                return;
            }
            navigator.mediaDevices.getUserMedia({audio: true}).then(function (stream) {
                var input = audio_context.createMediaStreamSource(stream);
                recorder = new Recorder(input);

                var falg = window.location.protocol;
                if (falg == 'https:') {
                    recorder && recorder.record();

                    //示范一个公告层
                    layui.use(['jquery', 'layer'], function () {
                        var layer = layui.layer;

                        layer.msg('录音中...', {
                            icon: 16
                            , shade: 0.01
                            , skin: 'layui-layer-lan'
                            , time: 0 //20s后自动关闭
                            , btn: ['发送', '取消']
                            , yes: function (index, layero) {
                                //按钮【按钮一】的回调
                                recorder && recorder.stop();
                                recorder && recorder.exportWAV(function (blob) {
                                    wavBlob = blob;
                                    var fd = new FormData();
                                    var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
                                    fd.append('wavName', wavName);
                                    fd.append('file', wavBlob);

                                    var xhr = new XMLHttpRequest();
                                    xhr.onreadystatechange = function () {
                                        if (xhr.readyState == 4 && xhr.status == 200) {
                                            jsonObject = JSON.parse(xhr.responseText);

                                            voicemessage = '<div style="cursor:pointer;text-align:center;" onclick="getstate(this)" data="play"><audio src="' + jsonObject.data.src + '"></audio><i class="layui-icon" style="font-size:25px;">&#xe652;</i><p>音频消息</p></div>';

                                            var content = 'voice('+jsonObject.data.src+')';

                                            var sid = $('#channel').text();

                                            var time;

                                            var sdata = $.cookie('cu_com');

                                            if (sdata) {
                                                var json = $.parseJSON(sdata);
                                                var img = json.avater;

                                            }

                                            if ($.cookie("itime") == "") {
                                                var myDate = new Date();
                                                time = myDate.getHours() + ":" + myDate.getMinutes();
                                                var timestamp = Date.parse(new Date());
                                                $.cookie("itime", timestamp / 1000);

                                            } else {

                                                var timestamp = Date.parse(new Date());
                                                var lasttime = $.cookie("itime");
                                                if ((timestamp / 1000 - lasttime) > 30) {
                                                    var myDate = new Date(timestamp);
                                                    time = myDate.getHours() + ":" + myDate.getMinutes();
                                                } else {
                                                    time = "";
                                                }

                                                $.cookie("itime", timestamp / 1000);
                                            }

                                            var str = '';
                                            str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                                            str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle cu_pic" src="' + pic + '" width="50px" height="50px"></div>';
                                            str += "<div class='outer-right'><div class='customer'>";
                                            str += "<pre>" + voicemessage + "</pre>";
                                            str += "</div></div>";
                                            str += "</li>";

                                            $(".conversation").append(str);
                                            $("#text_in").empty();

                                            scroll_bottom();

                                            $.ajax({
                                                url: "/admin/event/chat",
                                                type: "post",
                                                data: {
                                                    service_id: service_id,
                                                    visiter_id: visiter_id,
                                                    content: content,
                                                    business_id: business_id,
                                                    avatar: pic,
                                                    record: record
                                                },
                                                dataType: 'json',
                                                success: function (res) {
                                                    switch (res.code) {
                                                        case 0:
                                                            return;
                                                        case 4:
                                                            layer.open({
                                                                title:'提示框',
                                                                area: ['300px', '180px'],
                                                                content:res.msg,
                                                                btn:['是','否'],
                                                                yes:function(){
                                                                    location.reload();
                                                                },
                                                                btn2:function(){
                                                                    layer.close();
                                                                }
                                                            });
                                                            break;
                                                        default:
                                                            layer.msg(res.msg,{icon:2});
                                                    }
                                                }
                                            });
                                        }
                                    };
                                    xhr.open('POST', '/admin/event/uploadVoice');
                                    xhr.send(fd);
                                });
                                recorder.clear();
                                layer.close(index);
                            }
                            , btn2: function (index, layero) {
                                //按钮【按钮二】的回调
                                recorder && recorder.stop();
                                recorder.clear();
                                audio_context.close();
                                layer.close(index);
                            }
                        });

                    });
                } else {

                    layer.msg('音频输入只支持https协议！');

                }

            }).catch(function (e) {
                show_user_media_error(e);
            });


        }
    }

    var getstate = function (obj) {

        var c = obj.children[0];

        var state = $(obj).attr('data');

        if (state == 'play') {
            c.play();
            $(obj).attr('data', 'pause');
            $(obj).find('i').html("&#xe651;");

        } else if (state == 'pause') {
            c.pause();
            $(obj).attr('data', 'play');
            $(obj).find('i').html("&#xe652;");
        }

        c.addEventListener('ended', function () {
            $(obj).attr('data', 'play');
            $(obj).find('i').html("&#xe652;");

        }, false);
    }


    function showDiv() {
        $("#fuceng").toggleClass('hide');
    }


    $(function () {

        $("#showinfo").on('click', function (event) {

            showDiv();

            $(document).one("click", function () {

                $("#fuceng").addClass('hide');

            });
            event.stopPropagation();//阻止事件向上冒泡
        });

        $("#fuceng").click(function (event) {
            event.stopPropagation();//阻止事件向上冒泡

        });
    });


    function choose(obj) {

        $(obj).children('i').removeClass('hidden');
        $(obj).siblings('li').children('i').addClass('hidden');
        var type = $(obj).attr('name');
        $.cookie('type', type);
        $("#fuceng").addClass('hide');
        types();
    }

    function getOs() {
        var OsObject = "";
        if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
            return "Firefox";
        }
    }

    //获取qq截图的图片
    (function () {
        var imgReader = function (item) {
            var blob = item.getAsFile(),
                reader = new FileReader();

            var formData = new FormData();
            formData.append('visiter_id', visiter_id);
            formData.append('business_id', business_id);
            formData.append('avatar', pic);
            formData.append('record', record);
            formData.append('service_id', service_id);
            var name = encodeURIComponent('img-' + new Date().getTime() + '.png');
            formData.append('upload', blob, name);
            $.ajax({
                url:'/admin/event/upload',
                type: 'POST',
                data: formData,
                //这两个设置项必填
                contentType: false,
                processData: false,
                success:function(res){

                }
            });

            // 读取文件后将其显示在网页中
            reader.onload = function (e) {
                var msg = '';
                msg += '<img onclick="getbig(this)"  src="' + e.target.result + '">';
                var time;

                if ($.cookie("itime") == "") {
                    var myDate = new Date();
                    time = myDate.getHours() + ":" + myDate.getMinutes();
                    var timestamp = Date.parse(new Date());
                    $.cookie("itime", timestamp / 1000);
                } else {
                    var timestamp = Date.parse(new Date());
                    var lasttime = $.cookie("itime");
                    if ((timestamp / 1000 - lasttime) > 30) {
                        var myDate = new Date(timestamp);
                        time = myDate.getHours() + ":" + myDate.getMinutes();
                    } else {
                        time = "";
                    }
                    $.cookie("itime", timestamp / 1000);
                }

                var str = '';
                str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                str += '<div class="" style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle cu_pic" src="' + pic + '" width="40px" height="40px"></div>';
                str += "<div class='outer-right no_border'><div class='customer'>";
                str += "<pre>" + msg + "</pre>";
                str += "</div></div>";
                str += "</li>";

                $(".conversation").append(str);
                scroll_bottom();

            }
            // 读取文件
            reader.readAsDataURL(blob);
        };
        document.getElementById('text_in').addEventListener('paste', function (e) {
            // 添加到事件对象中的访问系统剪贴板的接口
            var clipboardData = e.clipboardData,
                i = 0,
                items, item, types;

            if (clipboardData) {
                items = clipboardData.items;
                if (!items) {
                    return;
                }
                item = items[0];
                // 保存在剪贴板中的数据类型
                types = clipboardData.types || [];
                for (; i < types.length; i++) {
                    if (types[i] === 'Files') {
                        item = items[i];
                        break;
                    }
                }
                // 判断是否为图片数据
                if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
                    imgReader(item);
                }
            }
        });
    })();

    layui.use('element', function () {
        var element = layui.element;
    });

    // 视频通话
    var getvideo = function () {


//        var times = (new Date()).valueOf();
        var sid = $.cookie('services');
        if (service_id == sid) {
            window.open("https://v.zyllaw.hk:9988/room.php?cid=" + sid);
//
//            //申请
//            $.ajax({
//                url: '/admin/event/apply',
//                type: 'post',
//                data: {
//                    id: sid,
//                    cha: times,
//                    avatar: pic,
//                    name: visiter,
//                    channel: channel,
//                    business_id: business_id,
//                    visiter_id: visiter_id
//                },
//                dataType: 'json',
//                success: function (res) {
//                    if (res.code != 0) {
//                        layer.msg(res, {icon: 2, offset: '20px'});
//                    } else {
//
//                        var str = '';
//                        str += '<div class="videos">';
//                        str += '<video id="localVideo" autoplay></video>';
//                        str += '<video id="remoteVideo" autoplay class="hidden"></video></div>';
//
//                        layer.open({
//                            type: 1
//                            , title: '视频'
//                            , shade: 0
//                            , closeBtn: 1
//                            , area: ['440px', '378px']
//                            , content: str
//                            , end: function () {
//                                mediaStreamTrack.getTracks().forEach(function (track) {
//                                    track.stop();
//                                });
//
//                            }
//                        });
//
//
//                        try {
//                            connenctVide(times);
//                        } catch (e) {
//                            console.log(e);
//                            return;
//                        }
//
//
//                    }
//                }
//            });
//
        } else {

            layer.msg("还未连接客服！不能使用该功能");
        }
    }


    //获取tab
    function gettab(business_id) {

        $.ajax({
            url: '/admin/event/gettablist',
            type: 'post',
            data: {business_id: business_id},
            success: function (res) {
                if (res.code == 0) {
                    var tab = '';
                    var str = '';
                    $.each(res.data, function (k, v) {
                        tab += '<li>' + v.title + '</li>';
                        str += v.content;
                    });
                    $("#tablist").append(tab);
                    $("#tabcontent").append(str);
                }
            }
        });
    }

</script>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" cb-data="cb_32383637303234363930">

    <!-- Background of PhotoSwipe.
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides.
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<!-- Core CSS file -->
<link rel="stylesheet" href="/assets/libs/photoswipe/photoswipe.css">

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite,
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="/assets/libs/photoswipe/default-skin.css">

<!-- Core JS file -->
<script src="/assets/libs/photoswipe/photoswipe.min.js"></script>

<!-- UI JS file -->
<script src="/assets/libs/photoswipe/photoswipe-ui-default.min.js"></script>


</body>
</html>

